<template>
  <view class="second3">
    <view class="bottom-inner">
      <view class="bottom-title">第三项信息</view>
      <view class="second-content">
        <view class="left">
          <view class="second-title">
            <view class="cu-bar bg-white margin-top-xs">
              <view class="action sub-title">
                <text class="title-inner">脊柱侧弯</text>
                <text class="text-ABC text-blue">back observe</text>
              </view>
            </view>
          </view>
          <view v-for="(item, index) in xiongDuanList" :key="index">
              <QSWavesButton 
              :btnStyle="'margin: 10px;border:none !important;' + (item.itemDetail && item.item !== '正常' ? 'background:#B71C1C;color: #fff;font-weight: 600':item.itemDetail && item.item === '正常' ? 'background:#00796b;color: #fff;font-weight: 600' : 'background: #00796b10;color:#333;')" 
              :size="item.size" 
              :btnType="item.type" 
              :txt="item.item"
              :wavesColor="item.wavesColor" 
              :disabled="item.disabled"
              :loading="item.loading"
              :plain="item.plain"
              :formType="item.formType"
              :openType="item.openType"
              :hoverStartTime="item.hoverStartTime"
              :hoverStayTime="item.hoverStayTime"
              :hoverClass="item.hoverClass"
              :preIconType="item.preIconType"
              @click="chooseHandleBack(item)" 
              >slot传入内容</QSWavesButton>
          </view>
        </view>
      </view>
    </view>
    <view class="bottom-box">
      <u-button type="primary" size="large" @click="submitThird">
        <text class="icon iconfont icon-submit" style="padding-right: 10px"></text>
        提交
      </u-button>
    </view>
    <quick-message ref="message"></quick-message>
  </view>
</template>
<script>
import QSWavesButton from '@/components/QS-WavesButton/QS-WavesButton.vue';
import mRequest from '@/api/index.js'
import hccmStore from '@/common/hccm-store.js'
export default {
  components: {
    QSWavesButton
  },
  props:{
    studentId: {
      type: String,
      default: ''
    },
  },
  data() {
    return{
      xiongDuanList: [
        {
          item: '轻度',
          project: '第三项',
          bodyPart: '背部',
          side: '背面',
          itemDetail: false,
        },
        {
          item: '中度',
          project: '第三项',
          bodyPart: '背部',
          side: '背面',
          itemDetail: false,
        },
        {
          item: '重度',
          project: '第三项',
          bodyPart: '背部',
          side: '背面',
          itemDetail: false,
        },
        {
          item: '正常',
          project: '第三项',
          bodyPart: '背部',
          side: '背面',
          itemDetail: true,
        },
      ],
      yaoDuanList: [
        {
          item: '轻度',
          project: '第三项',
          bodyPart: '背部',
          side: '背面',
          itemDetail: false,
        },
        {
          item: '中度',
          project: '第三项',
          bodyPart: '背部',
          side: '背面',
          itemDetail: false,
        },
        {
          item: '重度',
          project: '第三项',
          bodyPart: '背部',
          side: '背面',
          itemDetail: false,
        },
        {
          item: '正常',
          project: '第三项',
          bodyPart: '背部',
          side: '背面',
          itemDetail: true,
        },
      ],
    }
  },
  onLoad(){
  },
  methods:{
    chooseHandleBack(val){
      this.xiongDuanList.map(v=>{
        if(val.item == v.item){
          v.itemDetail = true
        }else{
          v.itemDetail = false
        }
      })
    },
    chooseHandleYaoDuan(val){
      this.yaoDuanList.map(v=>{
        if(val.item == v.item){
          v.itemDetail = true
        }else{
          v.itemDetail = false
        }
      })
    },
    // 提交
    submitThird(){
      let xiongDuan = this.xiongDuanList.filter(item=>{
        return item.itemDetail == true
      })[0].item
      let yaoDuan = this.yaoDuanList.filter(item=>{
        return item.itemDetail == true
      })[0].item
      console.log(xiongDuan,yaoDuan)
      let params = []
      if(xiongDuan == '正常'){
        params.push({
          inspectId: hccmStore.getChooseInspectId(),
          studentId:this.studentId,
          project: '第三项',
          item: '脊柱侧弯',
          side: '背面',
          itemDetail: '否',
          bodyPart: '背面',
          level: '',
        })
      }else{
        params.push({
          inspectId: hccmStore.getChooseInspectId(),
          studentId:this.studentId,
          project: '第三项',
          item: '脊柱侧弯',
          side: '背面',
          itemDetail: '是',
          bodyPart: '背面',
          level: xiongDuan,
        })
      }
      
      mRequest.inspectDetailSave(params).then(res=>{
        console.log(res)
        this.$refs.message.show({
          type:'success', //String 默认default
          msg:'第三项信息保存成功', //String 显示内容 *
          direction:'top', //String 默认顶部显示
          icon:true, //Boolean|String 显示icon(false/true/string 默认显示icon)
          mask:true, //Boolean 遮罩（默认false没有遮罩）
          time:2000, //Number|Boolean 默认3000/false为不自动关闭
          customStyle:{ //自定义样式
            // color:'#FFFFFF', //字体图标色
            // backgroundColor:'rgba(0,0,0,.5)', //背景色
            fontSize: 12,
          }, 
          iconSize: 16, //Number 自定义icon大小(单位px 默认16 设置后会覆盖自定义样式里的设置优先级最高)
          iconColor: '', //String icon颜色(默认主题颜色 设置后会覆盖自定义样式里的设置优先级最高)
        })
        setTimeout(() => {
          uni.reLaunch({
            url: '/pages/home/third/index'
          });
        }, 1000);
      })
    },
    // 获取第三项体检详情
    getInspectDetailList(){
      let params = {
        inspectId: hccmStore.getChooseInspectId(),
        studentId:this.studentId,
        project:'第三项',
        limit:100,
        page: 1,
      }
      mRequest.inspectDetailList(params).then(res=>{
        if(res.data.records.length > 0){
         console.log(res.data.records)
         res.data.records.map(item=>{
          if(item.item == "脊柱侧弯"){
            if(item.itemDetail == '否'){
              this.xiongDuanList.map(v=>{
                if(v.item === '正常'){
                  v.itemDetail = true
                }else{
                  v.itemDetail = false
                }
              })
            }else{
              this.xiongDuanList.map(v=>{
                if(v.item === item.level){
                  v.itemDetail = true
                }else{
                  v.itemDetail = false
                }
              })
            }
          }
         }) 
        }
      })
    },
  }
};
</script>

<style lang="scss">
.second3{
  font-size: 16px;
  height: 100%;
  display: flex;
  flex-direction: column;
  .bottom-inner{
    padding: 0 ;
    margin: 0 !important;
    background: #fff;
    border-radius: 0 !important;
    flex: 1;
    display: flex;
    flex-direction: column;
    .bottom-title{
      font-size: 18px;
      color: #333;
      font-weight: 600;
      position: relative;
      text-indent: 10px;
      margin: 10px 0 14px 0;
    }
    .bottom-title:before{
      content: '';
      height: 80%;
      width: 4px;
      background: $u-primary;
      position: absolute;
      left: 0;
      top: 5%;
      border-radius: 4px;
    }

    .text-box{
      font-size: 16px;
      padding: 18px 0;
      .text-box-title{
        color: #333;
      }
    }
  }

  .second-content{
    display: flex;
    justify-content: center;
    flex: 1;
    .left{
      height: 100% !important;
      overflow: auto;
      flex: 0 0 48%;
      .second-title{
        text-align: left;
      }
    }
    .right{
      height: 100% !important;
      overflow: auto;
      flex: 0 0 48%;
    }
  }

  .bottom-box{
    height: 60px;
    padding-top: 10px;
    margin: 0 !important;
    .u-button{
      width: fit-content;
      padding: 0 80px;
      font-size: 16px;
    }
  }
}

</style>